<template>
  <div class="search-item" :class="{ 'search-item-close': !showMore }">
    <span class="search-item-head">{{ rowData.name }}</span>
    <span class="search-item-txt">全部</span>
    <slot></slot>
    <div class="search-show-more" @click="handleShowMore">
           <span>展开</span>
           <div class="search-show-more-icon" >
                <n-icon color="#ccc" >
                    <ChevronUp v-if="showMore"/>
                    <ChevronDown v-else/>
                </n-icon>
            </div>
    </div>


  </div>
</template>

<script setup>
    import {  NIcon } from 'naive-ui'
import { ChevronUp , ChevronDown} from "@vicons/ionicons5";
defineProps({
  active: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
});

const showMore = ref(false);

const handleShowMore = () => {
  showMore.value = !showMore.value;
  console.log(888, showMore.value);
};
</script>

<style lang="scss" scoped>

.search-item {

    margin-top: 10px;
    position: relative;
    width: 100%;
    padding-left: 10px;
    padding-right: 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.search-item-close{
    height: 20px;
    overflow: hidden;
}
.search-item-head {
    font-size: 14px;
    line-height: 20px;
}
.search-item-txt {
    font-size: 14px;
    line-height: 20px;
    padding: 0 10px;
    cursor: pointer;
}
.search-item-txt:hover {
    
}
.search-show-more {
   cursor: pointer;
   position: absolute;
   width: 50px;
   height: 20px;
   font-size: 12px;
   line-height: 20px;
   right:10px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
}
.search-show-more-icon{ 
     width: 12px;
     height: 18px;
}
</style>
